<template>
	<!-- 详情界面 -->
	<view class="content">
		  <!-- 轮播图 -->
		  <view class="lunpost">
			  <swiper @change="curents" :current="curent" style="width: 100%;height:750rpx;">
				  <swiper-item v-for="(item,index) of particularsimg" :key="index">
					<image mode="widthFix" :src="item.pics_big"></image>
				  </swiper-item>
			  </swiper>
			  <!-- 自定义切换 -->
			  <view class="activesindex">
				  <text class="activesindex_count">{{curent+1}}/</text>
				  <text class="activesindex_sum">{{particularsimg.length}}</text>
			  </view>
		  </view>
		  <!-- 标题 -->
		  <view class="particulars_title">
				<view class="particulars_title_top">
					<view class="particulars_title_top_left">
						<text class="particulars_title_top_left_hong">￥{{particulars.goods_price}}</text>
						<text class="particulars_title_top_left_hui">￥{{particulars.goods_price+100}}</text>
					</view>
					<text  class="particulars_title_top_right">库存 {{particulars.goods_number}}</text>
				</view>
				<text  class="particulars_title_bottom">{{particulars.goods_name}}</text>
		  </view>
		  <!-- 参数 -->
		  <view class="parament">
				<view  @click="selects" class="parament_list border-bottom">
					<view class="parament_list_left">
						<text class="parament_list_left_countname">已选</text>
						<text class="parament_list_left_count">{{banshi}}</text>
					</view>
					<view class="parament_list_right">
						<image mode="widthFix" src="http://localhost:3000/img/next2.png"></image>
					</view>
				</view>
				<view @click="params" class="parament_list border-bottom">
					<view class="parament_list_left">
						<text class="parament_list_left_countname">规格</text>
						<text class="parament_list_left_count">{{paraments[0].attr_name}}</text>
					</view>
					<view class="parament_list_right">
						<image mode="widthFix" src="http://localhost:3000/img/next2.png"></image>
					</view>
				</view>
				<view class="parament_list border-bottom" @click="selectreceiver">
					<view class="parament_list_left">
						<text class="parament_list_left_countname">送至</text>
						<text class="parament_list_left_count">暂无地址</text>
					</view>
					<view class="parament_list_right">
						<image mode="widthFix" src="http://localhost:3000/img/next2.png"></image>
					</view>
				</view>
				<view class="parament_list">
					<view class="parament_list_lefts">
						<view class="parament_but">
							<image style="width: 26rpx;margin-right: 4rpx;" mode="widthFix" src="http://localhost:3000/img/zj.png"></image>
							<text class="parament_list_left_count">正品保障</text>
						</view>	
						<view class="parament_but">
							<image style="width: 26rpx;margin-right: 4rpx;" mode="widthFix" src="http://localhost:3000/img/zj.png"></image>
							<text class="parament_list_left_count">商品保管</text>
						</view>
						<view class="parament_but">
							<image style="width: 26rpx;margin-right: 4rpx;" mode="widthFix" src="http://localhost:3000/img/zj.png"></image>
							<text class="parament_list_left_count">7天无理由退货</text>
						</view>
					</view>
					<view class="parament_list_right">
						<image mode="widthFix" src="http://localhost:3000/img/next2.png"></image>
					</view>
				</view>
		  </view>
		  <!-- 商品详情 -->
		  <view class="tuijians">
		  		<!-- 标题 -->
		  		<view class="tuijian">
		  			<text class="tuijian_1"></text>
		  			<text class="tuijian_2"></text>
		  			<text class="tuijian_3"></text>
		  			<text class="tjtitle">商品详情</text>
		  			<text class="tuijian_3"></text>
		  			<text class="tuijian_2"></text>
		  			<text class="tuijian_1"></text>
		  		</view>
				<view v-html="particulars.goods_introduce"></view>
				<!-- <view class="pariimg">
					<image mode="widthFix" src="http://localhost:3000/images/1.png"></image>
				</view> -->
		  </view>
		  <!-- 更多推荐 -->
		  <index-list>
				<!-- 标题 -->
				<view class="tuijian">
					<text class="tuijian_1"></text>
					<text class="tuijian_2"></text>
					<text class="tjtitle">更多推荐</text>
					<text class="tuijian_2"></text>
					<text class="tuijian_1"></text>
				</view>			
		  	<!-- 商品列表 -->
		  </index-list>
		  <!-- 底部购物车导航 -->
		  <view class="partbuttom">
				<view class="partbuttom_left" @click="shoopin">
					<view class="partbuttom_left_img">
						<image mode="widthFix" src="http://localhost:3000/img/g1.png"></image>
						<!-- <text  class="partbuttom_left_count">18</text> -->
					</view>
					<text  class="partbuttom_left_title">购物车</text>
				</view>
				<view class="partbuttom_right">
					<text class="partbuttom_right_add" @click="show=true">加入购物车</text>
					<text class="partbuttom_right_mai" @click="goumai">立即购买</text>
				</view>
		  </view>
		  <!-- 已选弹框 -->
		  <van-popup :show="show"
				  position="bottom"
				  close-icon="close"
				  custom-style="height: 80%;" 
				  closeable 
				  close-on-click-overlay
				  @close="close">
				  <text>价格</text>
				<view class="posre_dingwei">
					<view class="posre_absolid">
						<scroll-view scroll-y style="height: 330px;">
							<view class="yans">
								<text class="yanse">颜色</text>
								<view @click="selectparams(index,item)" class="yanse_list" :class="{yanse_list_active:index==ind}" v-for="(item,index) of xuanze" :key="index">{{item}}</view>
							</view>
							<view class="chic">
								<text></text>
								<view></view>
							</view>
						</scroll-view>
					</view>
					<view class="gouleft">
						<text class="gouleftname">购买数量</text>
						<van-stepper :value="count" @change="onchange"></van-stepper>
					</view>
				</view>
				<van-goods-action>
				  <van-goods-action-button
				    text="加入购物车"
				    type="warning"
					@click="addshop"
				  />
				  <van-goods-action-button text="立即购买" @click="goumai"  />
				</van-goods-action>
		  </van-popup>
		  <!-- 规格弹框 -->
		  <van-popup height="80%" @click-overlay='paramsoverlays' position="bottom" round :show="showparams" :close-on-click-overlay="true">
			  <view class="showparams">
				  <text class="showparams_title">产品参数</text>
				  <scroll-view class="scrollparams" scroll-y>
					  <view class="showparams_content">
						  <view v-for="(item,index) of paraments" :key="index" class="showparams_content_list">
							  <text class="showparams_content_title">{{item.attr_name}}</text>
							  <text class="showparams_content_val">{{item.attr_vals}}</text>
						  </view>
					  </view>
				  </scroll-view>
				  <text class="showparams_wancheng" @click="showparamswancheng">完成</text>
			  </view>
		  </van-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				// 默认显示index
				curent:0,
				// 是否显示已选弹框
				show:false,
				// 数量
				count:1,
				// 是否显示规格弹框
				showparams:false,
				// 商品详情
				particulars:{},
				// 轮播图片地址
				particularsimg:[],
				// 商品参数规格
				paraments:[],
				// 选择弹出框
				xuanze:[],
				// 加入购物车的参数
				banshi:'',
				// 选中的参数
				ind:0,
				// 用户id
				user_id:''
			}
		},
		onLoad(event) {
			uni.getStorage({
				key:"user",
				success: (res) => {
					console.log(res)
					this.user_id=JSON.parse(res.data).user_id
				},
			})
			console.log(event)
			this.getparticulars(event.item)
		},
		methods:{
			// 获取商品详情
			getparticulars(query){
				uni.request({
					url:"http://localhost:3001/goods_id",
					data:{
						id:query
					},
					method:"GET",
					success: (res) => {
						this.particulars=res.data.data[0]
						this.getshoopimg(this.particulars.goods_id)
						this.getparams(this.particulars.cat_id)
						console.log(this.particulars)
					}
				})
			},
			// 获取商品列表的图片地址
			getshoopimg(shooplist){
				uni.request({
					url:"http://localhost:3001/goods_img",
					data:{id:shooplist},
					method:"GET",
					success: (res) => {
						this.particularsimg=res.data.data
						// console.log(this.particularsimg)
					}
				})
			},
			// 获取商品参数
			getparams(id){
				uni.request({
					url:"http://localhost:3001/goods_id_params",
					data:{id:id},
					method:"GET",
					success: (res) => {
						this.paraments=res.data.data
						this.xuanze=this.paraments[this.paraments.length-1].attr_vals.split(',')
						console.log(this.paraments)
					}
				})
			},
			// 轮播图切换
			curents(ind){
				this.curent=ind.detail.current
			},
			// 点击商品参数,从底部弹出操作菜单
			selects(){
				this.show=true
			},
			// 点击关闭已选弹框图标
			close(){
				this.show=false
			},
			// 通过value设置输入值，可以通过change事件监听到输入值的变化
			onchange(event){
				console.log(event.detail)
				this.count=event.detail
			},
			// 点击规格弹出对话框
			params(){
				this.showparams=true
			},
			// 点击规格遮罩层关闭
			paramsoverlays(){
				this.showparams=false
			},
			// 点击规格的完成按钮
			showparamswancheng(){
				this.showparams=false
			},
			// 点击送至按钮,进入我的地址页面
			selectreceiver(){
				uni.navigateTo({
					url:"../mone/selectreceiver"
				})
			},
			// 选择参数
			selectparams(ind,item){
				this.ind=ind
				this.banshi=item
				console.log(item)
			},
			// 点击加入购物车按钮
			addshop(){
				if(this.banshi){
					uni.showToast({
						title:"已添加入购物车",
						icon:"none",
						success:()=>{
							this.show=false
							this.getshopexits(this.user_id,this.particulars.goods_id)
						}
					})
				}else{
					uni.showToast({
						title:"选择规格颜色",
						icon:"none"
					})
				}
			},
			// 点击左侧购物车,进入购物车
			shoopin(){
				uni.switchTab({
					url:"../shooping/shooping"
				})
			},
			// 点击立即购买按钮
			goumai(b){
				console.log(b,'b')
			},
			// 判断商品是否存在购物车中
			getshopexits(user_id,goods_id){
				uni.request({
					url:"http://localhost:3001/getshoopexist",
					data:{
						user_id:user_id,
						goods_id:goods_id
					},
					success: (res) => {
						if(res.data.data[0].count>0){
							// 存在，修改购物车的数量
							uni.request({
								url:"http://localhost:3001/getshoopexit",
								data:{
									user_id:user_id,
									goods_id:goods_id,
									goods_count:this.count
								},
								success: (res) => {
									console.log('更新',res)
								}
							})
						}else{
							// 不存在，添加商品
							uni.request({
								url:"http://localhost:3001/getshoopadd",
								data:{
									user_id:user_id,
									goods_id:goods_id,
									goods_count:this.count,
									goods_params:this.banshi
								},
								success: (res) => {
									console.log('添加',res)
								}
							})
						}
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #f3f3f3;
		height: 100%;
		width: 750rpx;
	}
	.content{
		width: 100%;
		height: 100%;
	}
	image{
		width: 100%;
		display: block;
	}
	.lunpost{
		position: relative;
	}
	.activesindex{
		background-color: #999999;
		width: 66rpx;
		height: 32rpx;
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
		color: #FFFFFF;
		position: absolute;
		right: 20rpx;
		bottom: 60rpx;
	}
	
	.particulars_title{
		margin: 20rpx 0;
		padding:30rpx 18rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
	}
	.particulars_title_top{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.particulars_title_top_left_hong{
		font-size: 34rpx;
		color: #e92935;
		margin-right: 6rpx;
	}
	.particulars_title_top_left_hui{
		font-size: 22rpx;
		color: #c5c5c5;
		text-decoration: line-through;
	}
	.particulars_title_top_right{
		font-size: 22rpx;
		color: #c5c5c5;
	}
	.particulars_title_bottom{
		font-size: 28rpx;
		color: #000000;
	}

	.parament{
		background-color: #FFFFFF;
		padding: 0 18rpx;
	}
	.parament_list{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
	}
	.parament_list_left{
		font-size: 20rpx;
	}
	.parament_list_lefts{
		flex:1;
		display: flex;
		font-size: 20rpx;
	}
	.parament_list_left_countname{
		color: #c2c2c2;
		margin-right: 40rpx;
	}
	.parament_list_left_count{
		color: #000000;
	}
	.parament_list_right{
		width:20rpx ;
	}
	.border-bottom{
		border-bottom: 2rpx solid #f3f3f3;
	}
	.parament_but{
		display: flex;
		align-items:center;
		margin-right: 60rpx;
	}
	
	.tuijian{
		font-size: 26rpx;
		color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;
	}
	text[class^="tuijian"]{
		background: #aeaeae;
		border-radius: 50%;
		margin: 0 10rpx;
	}
	.tjtitle{
		background-color:#f7f7f7 ;
	}
	.tuijian_1{
		padding: 4rpx;
	}
	.tuijian_2{
		padding: 6rpx;
	}
	.tuijian_3{
		padding: 8rpx;
	}
	.pariimg{
		width: 750rpx;
	}
	
	.partbuttom{
		width: 750rpx;
		height: 80rpx;
		border-top: 2rpx solid #f2f2f2;
		background-color: #FFFFFF;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
	}
	.partbuttom_left{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.partbuttom_left_img{
		width: 38rpx;
		position: relative;
	}
	.partbuttom_left_count{
		display: block;
		border: 1rpx solid red;
		border-radius: 20rpx;
		font-size: 12rpx;
		color: red;
		padding: 0 5rpx;
		position: absolute;
		right: -6rpx;
		top: 0;
	}
	.partbuttom_left_title{
		font-size: 20rpx;
		color: #757575;
	}
	.partbuttom_right{
		display: flex;
		
	}
	.partbuttom_right_add{
		background-color: #eb2c3b;
		padding: 12rpx 22rpx;
		border-radius: 30rpx;
		font-size: 22rpx;
		color: #FFFFFF;
		margin-right: 10rpx;
	}
	.partbuttom_right_mai{
		background-color: #ffaa1c;
		padding: 12rpx 22rpx;
		border-radius: 30rpx;
		font-size: 22rpx;
		color: #FFFFFF;
	}
	
	/* 弹出框 */
	.gouleft{
		display: flex;
		border-top: 2rpx solid #eee;
		justify-content: space-between;
		padding: 20rpx 10rpx;
	}
	
	/* 规格弹框 */
	.showparams{
		padding: 10rpx 20rpx;
		position: relative;
	}
	.showparams_title{
		display: block;
		text-align: center;
		margin: 30rpx auto;
		font-size: 32rpx;
	}
	.showparams_content{
		
	}
	.showparams_content_list{
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #eee;
		padding: 38rpx 0;
	}
	.showparams_content_title{
		min-width: 100rpx;
		font-size: 28rpx;
		color: #000000;
		margin-right: 20rpx;
	}
	.showparams_content_val{
		font-size: 26rpx;
		color: #999;
		flex: 1;
		margin-left: 20rpx;
		word-break:break-all;
	}
	.scrollparams{
		height: 350px;
	}
	.showparams_wancheng{
		display: block;
		background-color:#FF0000;
		border-radius: 35rpx;
		padding: 20rpx 0;
		font-size: 26rpx;
		text-align: center;
		color: #FFFFFF;
		margin-top: 60rpx;
	}
	
	.posre_dingwei{
		position: absolute;
		top: 100rpx;
		left: 0;
		right: 0;
	}
	.posre_absolid{
		/* position: absolute;
		top: 30rpx; */
	}
	.yans{
		padding: 10rpx;
	}
	.yanse{
		font-size:32rpx;
		display: block;
	}
	.yanse_list{
		padding:10rpx;
		margin: 20rpx;
		background-color: #eee;
		font-size: 26rpx;
		border-radius: 5rpx;
		border: 2rpx solid #FFFFFF;
	}
	.yanse_list_active{
		border-color: red;
	}
</style>
